<template>
    <div>
        <div style="text-align: center;"><h1>人工阅卷</h1></div>
        <el-form>
            <el-form-item label="题目描述：">
                {{needPeopleJudgeStone.needProblemPeople?.problemDescribe}}
            </el-form-item>
            
            <el-form-item label="标准答案：">   
                <div style="white-space: pre-line;">{{ needPeopleJudgeStone.needProblemPeople?.answer }}</div>
            </el-form-item>
        </el-form>

        <el-divider />


        <div style="float: left;height: 400px;">
            <el-form>
                <el-form-item label="学生id">{{peopleJudgeCacheList[index]?.userId}}</el-form-item>
                <el-form-item label="用户名">{{peopleJudgeCacheList[index]?.userName}}</el-form-item>
                <el-form-item label="学生答案">{{peopleJudgeCacheList[index]?.input}}</el-form-item>
            </el-form>

            <div style="width: 700px;margin-top: 40%;" v-if="peopleJudgeCacheList[index]">
                <el-radio-group  v-model="peopleJudgeCacheList[index].score">
                    <el-radio @change="updateScore" style="width: 30px;" v-for="item in needPeopleJudgeStone.needProblemPeople?.score+1" :value="item-1">{{item-1}}</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="box">
            <el-button style="margin-left: 10px;margin-left: 5px;" circle v-for="(item,idx) in peopleJudgeCacheList" :key="idx" :type="item.score===null || item.score===undefined?'info':'success'" @click="index=idx">
                {{idx+1}}
            </el-button>
        </div>






    </div>



</template>


<script setup lang="ts">
    import { onMounted } from 'vue';
    import usePeopleProblemAdmin from '@/hooks/admin/usePeopleProblemAdmin'
    import { useNeedPeopleJudge } from '@/stone/needPeopleJudge';
    import { ElMessage } from 'element-plus';
    import router from '@/router';
    const needPeopleJudgeStone= useNeedPeopleJudge()
    const prop=defineProps(['examId','problemId'])
    const {index,peopleJudgeCacheList,getPeopleJudgeCache,updateScore}=usePeopleProblemAdmin()
    onMounted(()=>{
        if(needPeopleJudgeStone.needProblemPeople===null){
            ElMessage.error('请从判题入口进入')
            router.push('/admin/exam')
        }
        getPeopleJudgeCache(prop.examId,prop.problemId)
    })

</script>


<style scoped>
    .box{
        height: 700px; 
        width: 300px; 
        float:right;
        border-left: 1px solid rgb(204, 203, 203);
    }
</style>